<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <!-- 筛选条件 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">筛选条件</h3>
                    </div>
                    <div class="panel-body">
                        <form id="filterForm" class="form-inline">
                            <div class="form-group">
                                <label>统计时间：</label>
                                <input type="date" class="form-control" id="startDate" name="start_date" value="{:date('Y-m-01')}">
                                <span>至</span>
                                <input type="date" class="form-control" id="endDate" name="end_date" value="{:date('Y-m-d')}">
                            </div>
                            <div class="form-group">
                                <label>员工：</label>
                                <select class="form-control" id="userId" name="user_id">
                                    <option value="">全部员工</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>工资类型：</label>
                                <select class="form-control" id="wageType" name="wage_type">
                                    <option value="">全部</option>
                                    <option value="piece">计件工资</option>
                                    <option value="time">计时工资</option>
                                </select>
                            </div>
                                                                    <div class="form-group">
                                            <button type="button" class="btn btn-primary" onclick="Controller.api.loadWageStatistics()">
                                                <i class="fa fa-search"></i> 查询
                                            </button>
                                            <button type="button" class="btn btn-success" onclick="Controller.api.exportWageStatistics()">
                                                <i class="fa fa-download"></i> 导出
                                            </button>
                                            <a href="{:url('scanwork/active_wage_statistics/detail')}" class="btn btn-info">
                                                <i class="fa fa-list"></i> 详细报表
                                            </a>
                                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fa fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">员工数量</span>
                        <span class="info-box-number" id="employeeCount">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">总工资</span>
                        <span class="info-box-number" id="totalWage">￥0.00</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-clock-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">总工时</span>
                        <span class="info-box-number" id="totalHours">0小时</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-file-text"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">报工次数</span>
                        <span class="info-box-number" id="reportCount">0</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">工资类型分布</h3>
                    </div>
                    <div class="panel-body">
                        <div id="wageTypeChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">员工工资排行</h3>
                    </div>
                    <div class="panel-body">
                        <div id="wageRankChart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 员工统计表格 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">员工工资统计</h3>
                    </div>
                    <div class="panel-body">
                        <table id="wageTable" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>员工姓名</th>
                                    <th>计件工资</th>
                                    <th>计时工资</th>
                                    <th>总工资</th>
                                    <th>生产数量</th>
                                    <th>工作时长</th>
                                    <th>效率(件/小时)</th>
                                    <th>时薪(元/小时)</th>
                                    <th>平均单次工资</th>
                                    <th>报工次数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="wageTableBody">
                                <!-- 动态加载数据 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细数据表格 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">详细报工记录</h3>
                    </div>
                    <div class="panel-body">
                        <table id="detailTable" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>员工姓名</th>
                                    <th>订单号</th>
                                    <th>产品名称</th>
                                    <th>产品型号</th>
                                    <th>工序</th>
                                    <th>生产数量</th>
                                    <th>工作时长</th>
                                    <th>计件工资</th>
                                    <th>计时工资</th>
                                    <th>总工资</th>
                                    <th>工作日期</th>
                                    <th>审核时间</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody id="detailTableBody">
                                <!-- 动态加载数据 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 员工详情模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">员工工资详情</h4>
            </div>
            <div class="modal-body" id="userDetailContent">
                <!-- 动态加载内容 -->
            </div>
        </div>
    </div>
</div> 